<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model和数据双向绑定</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div class="app">
            <input type="text" v-model="message" style="display:block;box-sizing: border-box;width:  100%;height: 50px;padding:0 20px;">
            <h4>{{message}}</h4>
            <!-- 可以看见，当text里的内容改变的时候h4的内容也改变了，实现了数据的双向绑定 -->
        </div>
        <script>
        
            /* 
                当你在浏览器的控制器中修改vue属性值的时候，可以看见页面也会进行相应的改变，从model同步到页面，这是单向的数据绑定

                v-bind只能实现数据的单向的数据绑定，从model自动绑定到页面，即从 M 自动弄绑定到 V，无法实现数据的双向绑定

                v-model可以实现数据的双向绑定，即可以从 M 指向 V ，也可以 V 指向 M ，这样就是实现了数据的双向绑定
                作用范围：表单
                    使用 v-model 可以是实现表单元素和 Model 中数据的双向数据绑定

                v-model 只能运用在表单元素中，像 input(radio,text,address,email),select,checkbox,textarea
            
             */
        
        
        </script>


        <script>
        
            var vm = new Vue({
                el:'.app',
                data:{
                    message:'hello world'
                },
                methods:{
                    
                }
            });
        
        </script>
    </body>
</html>